.container {
    display: flex;
    width: 100%;
    height: calc(100% - 150px);
    padding: 20px 40px;
    flex-wrap: wrap;
    color: white;
    align-content: flex-start;

    .containerLeft {
        width: 490px;
        height: 285px;
        flex-shrink: 0;
    }

    .containerRight {
        flex: 1;
        height: 285px;
    }
}

.topBox {
    width: 100%;
    display: flex;
    gap: 30px;
}


.iconTitleLight {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.iconTitle {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0px;
    top: -3px;
}

.bottomBox {
    width: 100%;
    height: 269px;
    display: flex;
    .bottomBoxLeft{
        width: 50%;
        height: 100%;
    }
    .bottomBoxRight{
        width: 50%;
        height: 100%;
    }
}

.centerBox {
    width: 100%;
    height: 269px;
    margin-top: 35px;
    display: flex;
    gap: 30px;

    .centerBoxItem {
        width: 490px;
        height: 100%;
        flex-shrink: 0;
    }

    .centerBoxThan {
        flex: 1;
        height: 100%;
    }


}

.bottomBox {
    width: 100%;
    height: 269px;
    margin-top: 35px;
    display: flex;
    gap: 30px;

    .bottomBoxItem {
        width: 490px;
        height: 100%;
    }

    .bottomBoxThan {
        width: 800px;
        height: 100%;
    }
}